<template>
  <a-card :bordered="false">
    <h3>内容列表</h3>
    <ContentFilter ref="filter" :url="url" :activeKey="activeKey" :extensionVisible.sync="extensionVisible" @onSearch="onSearch"></ContentFilter>
    <div style="position: relative;">
      <a-tabs v-model="activeKey" @change="tabChange">
        <a-tab-pane v-for="item in tabList" :tab="item.name" :key="item.status"></a-tab-pane>
      </a-tabs>
      <a class="content-record" @click="examineRecord">内容审核记录</a>
    </div>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }" :key="activeKey">
      <span slot="userInfor" slot-scope="text, record"> {{ record.userNickname }}/{{ record.phone }}(社区ID：{{ record.communityId }}) </span>
      <span slot="imageVideo" slot-scope="text, record, index">
        <div v-if="record.contentType == 0" class="image-video-wrapper">
          <template v-if="record.pictureVideo">
            <img class="img" v-for="(item, index) in record.pictureVideo.split(',').slice(0, 1)" :src="item" alt="" @click="handleShowImg(index, record.pictureVideo.split(','))" :key="index" />
            <div class="img-num">{{ record.pictureVideo.split(',').length }}张</div>
          </template>
        </div>
        <img
          v-else
          class="image-video-wrapper img"
          @click="handlePreview(record.pictureVideo)"
          :src="record.cover"
          alt=""
        />
      </span>
      <span slot="content" slot-scope="text, record">
        <p style="font-weight: bold;">{{ record.contentTitle }}</p>
        <a-popover :overlayStyle="{ width: '380px', height: 'auto' }">
          <template slot="content">
            <p style="word-break: break-all;">{{ record.bodyContent }}</p>
          </template>
          <span class="remarks">{{ record.bodyContent }}</span>
        </a-popover>
      </span>
      <span v-if="record.communityTopicAssGoodsDtoList.length" class="img-wrapper" slot="productList" slot-scope="text, record, index">
        <div class="img-list" @click="handleShowProductList(record.communityTopicAssGoodsDtoList)">
          <template v-for="(item, index) in record.communityTopicAssGoodsDtoList.slice(0, 3)" >
            <img class="img" v-if="item.image" :src="item.image" alt="" :key="index" />
            <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="" :key="'place'+index" />
          </template>
        </div>
        <div class="img-text" @click="handleShowProductList(record.communityTopicAssGoodsDtoList)">共{{ record.communityTopicAssGoodsDtoList.length }}件</div>
      </span>
      <span slot="topicName" slot-scope="text, record">
        <a-tag color="#2db7f5" v-if="record.topicName">#{{ record.topicName }}</a-tag>
        <span v-else>/</span>
      </span>
      <span slot="reason" slot-scope="text, record">
        <div style="font-weight: bold;">{{ record.informType }}</div>
        <div style="color: #999;">{{ record.informReason }}</div>
      </span>
      <span slot="browseNumber" slot-scope="text, record, index">
        <div style="font-weight: bold;">{{ record.totalBrowseNumber }}</div>
        <a-input-number v-model="record.fixedNumber" :precision="0" style="width: 50%;text-align: center;" :min="0" @focus="onFocus(record, index)" :max="100000" size="small" />
        <a-button type="primary" size="small" v-if="focusIndex === index" @click="handleFixedNumberSubmit">保存</a-button>
      </span>
      <span slot="praiseNumber" slot-scope="text, record, index">
        <div style="font-weight: bold;">{{ record.totalPraiseNumber }}</div>
        <a-input-number v-model="record.virtualPraiseNumber" :precision="0" style="width: 50%;text-align: center;" :min="0" @focus="onFocus(record, 'praiseNumber' + index)" :max="100000" size="small" />
        <a-button type="primary" size="small" v-if="focusIndex === 'praiseNumber' + index" @click="handleVirtualPraiseNumberSubmit">保存</a-button>
      </span>
      <span slot="releaseFrom" slot-scope="text, record, index">
        <span v-if="record.releaseFrom == 1">小程序发帖</span>
        <span v-if="record.releaseFrom == 2">后台发帖</span>
        <span v-if="record.releaseFrom == 3">评价同步</span>
        <span v-if="record.releaseFrom == 4">pos+同步</span>
        <span v-if="!record.releaseFrom || record.releaseFrom == -1">/</span>
      </span>
      <span slot="action" slot-scope="text, record">
        <template v-if="activeKey == 0 || activeKey == 1">
          <a @click="handleDetails(record.id)">详情</a>
          <a-divider type="vertical" />
        </template>
        <template v-if="activeKey == 3">
          <a @click="handleDetailsModal(record.id)">详情</a>
          <a-divider type="vertical" />
        </template>
        <template v-if="activeKey == 3">
          <a-popconfirm title="确定要发布该内容吗？" ok-text="确定" cancel-text="暂不" @confirm="handleReleaseOrEnable(record.id, 1)">
            <a>发布</a>
          </a-popconfirm>
        </template>
        <template v-if="activeKey == 1">
          <a-popconfirm title="内容启用后，将展示在社区内，确定启用吗？" ok-text="确定" cancel-text="暂不" @confirm="handleReleaseOrEnable(record.id, 2)">
            <a>启用</a>
          </a-popconfirm>
        </template>
        <template v-if="activeKey == 0">
          <a @click="handleShowExtension(record.id)">推广</a>
          <a-divider type="vertical" />
        </template>
        <template v-if="activeKey == 0">
          <a @click="handleDisable(record.id)">禁用</a>
        </template>
        <template v-if="activeKey == 0">
          <a-divider type="vertical" />
          <a v-if="record.isTop == 0" @click="handlePlacedTop('1', record.id)">置顶</a>
          <a v-if="record.isTop == 1" @click="handlePlacedTop('0', record.id)">取消置顶</a>
        </template>
        <template v-if="activeKey == 3 || ((activeKey == 0 || activeKey == 1) && record.identityId != 2 && record.identityId != 3)">
          <a-divider type="vertical" />
          <a @click="handleEdit(record.id)">编辑</a>
        </template>
        <a-popconfirm
          v-if="activeKey == 3 || ((activeKey == 0 || activeKey == 1) && record.identityId != 2 && record.identityId != 3)"
          title="确定要删除该内容吗？"
          ok-text="确定"
          cancel-text="暂不"
          @confirm="handleDelet(record.id)"
        >
          <a-divider type="vertical" />
          <a>删除</a>
        </a-popconfirm>
        <template v-if="activeKey == 2">
          <a v-if="record.status == 2" @click="handleExamine(record.id)">审核</a>
        <!-- 0启用  1禁用 2待审核 3待发布 4审核不通过 5草稿 6机审中 7机审不通过 -->
          <a v-else disabled="true">审核</a>
        </template>
      </span>
    </s-table>
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgs"></ParagraphPic>
    <PreviewVideo :visible.sync="previewVisible" :videoUrl="videoUrl"></PreviewVideo>
    <ExamineOrDetailsModal :whyList="examineWhyList" @onOk="onExamineOk" :bodyContent="bodyContent" :pictureVideo="pictureVideo" :details.sync="details" :type="activeKey == 3 ? 2 : 1" :isDetails="activeKey == 3" :visible.sync="examineOrDetailsVisible"></ExamineOrDetailsModal>
    <DisableModal :visible.sync="disableVisible" :whyList="whyList" @onOk="onOk"></DisableModal>
    <ProductListModal :visible.sync="productVisible" :productList="productList"></ProductListModal>
  </a-card>
</template>
<script>
import { 
  contentPage,
  contentAddOrUpdate,
  contentDelete,
  contentDetails,
  contentAuditRecordsAdd,
  contentToAudit,
  contentPlacedTop,
  contentVirtualValue
} from '@/api/micromall/communityContent'
import { whyPage } from '@/api/micromall/communityUser'
import { STable } from '@/views/box/components'
import ContentFilter from '../../components/ContentFilter'
import ParagraphPic from '../../components/ParagraphPic'
import PreviewVideo from '../../components/PreviewVideo'
import { enabledColumns, examineColumns, releasedColumns, disableColumns } from '../contentManagement/contentList.js'
import ExamineOrDetailsModal from '../../components/ExamineOrDetailsModal'
import DisableModal from '../../components/DisableModal'
import ProductListModal from '../../components/ProductListModal'
import { mapGetters } from 'vuex'
const tabList = [
  {
    name: '已启用',
    status: '0'
  },
  {
    name: '待审核',
    status: '2'
  },
  {
    name: '待发布',
    status: '3'
  },
  {
    name: '已禁用',
    status: '1'
  }
]
export default {
  components: {
    ContentFilter,
    STable,
    ParagraphPic,
    PreviewVideo,
    ExamineOrDetailsModal,
    DisableModal,
    ProductListModal
  },
  data() {
    return {
      list: [],
      maxPraiseNumber: 0,
      minFixedNumber: 0,
      record: {},
      focusIndex: -1,
      url: '',
      sort: {},
      id: '',
      bodyContent: '',
      pictureVideo: [],
      details: {},
      whyList: [],
      examineWhyList: [],
      disableVisible: false,
      examineOrDetailsVisible: false,
      extensionVisible: false,
      videoUrl: '',
      previewVisible: false,
      productVisible: false,
      imgCurrent: 0,
      imgVisible: false,
      imgs: [],
      productList: [],
      tabList,
      activeKey: this.$route.query.status || tabList[0].status,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns: enabledColumns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {
      },

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        if (this.requestFlag()) return
        this.focusIndex = -1
        this.record = {}
        if (parameter.sortOrder) {
          this.sort = {}
          this.sort[parameter.sortField + 'Sort'] = parameter.sortOrder == 'descend' ? 0 : 1
        } else {
          delete this.sort[parameter.sortField + 'Sort']
        }
        const data = {
          userNickname: this.$route.query.communityId || '',
          jumps: this.$route.query.jumps || '',
          status: this.activeKey,
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize,
          ...this.sort
        }
        return contentPage(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            this.list = records ? JSON.parse(JSON.stringify(records)) : []
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }
            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
  },
  activated() {
    this.getCount()
    this.getWhyPage()
    this.getExamineWhyList()
  },
  computed: {},
  mounted() {},
  watch: {
    $route(to, from) {
      const whiteList = [
        '/micromall/community/contentManagement/details/',
       '/micromall/community/contentManagement/addOrEditOfficialContent',
       '/micromall/community/contentManagement/materialList'
       ]
      const currentPathBase = '/micromall/community/contentManagement/contentList'
      const currentPath = this.$route.path
      if (this.checkRoute(from.path, whiteList) && to.path.includes(currentPathBase)) {
        this.$refs.table.refresh() // 刷新当前列表（记录上次页码）
      } else {
        if (currentPath.includes(currentPathBase)) {
          
          if (this.activeKey == tabList[0].status || this.activeKey == this.$route.query.status) {
            this.activeKey = tabList[2].status
            this.tabChange(this.activeKey) // 刷新当前页面
          }
          const that = this
          setTimeout(() => {
            that.activeKey = this.$route.query.status || tabList[0].status
            that.tabChange(that.activeKey) // 刷新当前页面
          }, 1)
        }
      }
    }
  },
  methods: {
    requestFlag() {
      const currentPathBase = '/micromall/community/contentManagement/contentList'
      const currentPath = this.$route.path
      if (!currentPath.includes(currentPathBase)) return true
      return false
    },
    // 虚假点赞浏览量
    onFocus(record,index) {
      this.record = record
      const fixedNumber = this.list.filter(e => e.id == record.id)[0].fixedNumber
      const virtualPraiseNumber = this.list.filter(e => e.id == record.id)[0].virtualPraiseNumber
      this.maxPraiseNumber = Math.ceil(fixedNumber/5)
      this.minFixedNumber = Math.ceil(virtualPraiseNumber*5)
      this.focusIndex = index
    },

    // 保存虚假浏览量
    handleFixedNumberSubmit() {
      const { fixedNumber, id } = this.record
      if (fixedNumber < this.minFixedNumber) {
        this.$message.error(`为确保效果真实，浏览量>点赞量*5，填【${this.minFixedNumber}，100000范围内的整数】`)
        return
      }
      const data = {
        type: 0,  // 0 浏览 1点赞
        contentId: id,
        virtualNumber: fixedNumber
      }
      contentVirtualValue(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.$message.success('虚拟浏览量修改成功')
        } else {
          this.$message.error(res.msg || res.message)
        }
        this.focusIndex = -1
        this.record = {}
      })
    },

    // 保存虚假点赞浏
    handleVirtualPraiseNumberSubmit() {
      const { virtualPraiseNumber, id } = this.record
      if (virtualPraiseNumber > this.maxPraiseNumber) {
        this.$message.error(`为确保效果真实，浏览量>点赞量*5，填【0，${this.maxPraiseNumber}范围内的整数】`)
        return
      }
      const data = {
        type: 1,  // 0 浏览 1点赞
        contentId: id,
        virtualNumber: virtualPraiseNumber
      }
      contentVirtualValue(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.$message.success('虚拟点赞数修改成功')
        } else {
          this.$message.error(res.msg || res.message)
        }
        this.focusIndex = -1
        this.record = {}
      })
    },

    handleShowExtension(id) {
      this.extensionVisible = true
      this.url = `/packages/wm-cloud-jnbycommunity/contentDetail/index?id=${id}`
    },

    // 置顶/取消置顶
    handlePlacedTop(isTop, contentId) {
      const data = {
        isTop,  // 0 取消置顶   1 置顶 
        contentId 
      }
      contentPlacedTop(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    
    // 获取状态数量
    getCount() {
      if (this.requestFlag()) return
      contentToAudit().then(res => {
        if (res.code === 200) {
          const {toAuditNumber, toReleasedNumber} = res.data
          this.tabList[1].name = `待审核（${toAuditNumber || 0}）`
          this.tabList[2].name = `待发布（${toReleasedNumber || 0}）`
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 禁用原因
    getWhyPage() {
      // 3内容禁用原因
      const data = {
        type: 3,
        status: 0
      }
      whyPage(data).then(res => {
        if (res.code === 200) {
          this.whyList = res.data.records
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 审核原因
    getExamineWhyList() {
      const data = {
        type: 2,
        status: 0
      }
      whyPage(data).then(res => {
        if (res.code === 200) {
          this.examineWhyList = res.data.records
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    

    // 禁用
    handleDisable(id) {
      this.id = id
      this.disableVisible = true
    },

    // 禁用弹窗确认
    onOk(v) {
      const { note, why } = v
      const data = {
        id: this.id,
        status: '1',
        disableWhy: why.map(e => e.id).join(','),
        disableNote: note,
        whyName: why.map(e => e.whyName).join(',')
      }
      contentAddOrUpdate(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.getCount()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),

    // 审核
    onExamineOk(v) {
      const { why, status, auditNote, contentLevel } = v
      const data = {
        ...this.details,
        ...v,
        auditWhy: status == '4' ? why.map(e => e.whyName).join(',') : null,
        auditNote: status == '4' ? auditNote : null,
        contentLevel: status == '4' ? null : contentLevel,
        auditId: this.userInfo().id,
        auditName: this.userInfo().realname,
        releaseTime: status == '0' ? this.getTime() : null
      }
      contentAddOrUpdate(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.getContentAuditRecordsAdd(data)
          this.getCount()
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 新增审核记录
    getContentAuditRecordsAdd(e) {
      const data = {
        ...e,
        contentId: e.id
      }
      contentAuditRecordsAdd(data).then(res => {
        if (res.code === 200) {
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 发布、启用
    handleReleaseOrEnable(id, type) {
      // 1发布2启用
      const data = {
        id,
        status: '0',
        releaseTime: type == 1 ? this.getTime() : null,
        enable: type == 2 ? 1 : null
      }
      contentAddOrUpdate(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.getCount()
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 获取当前时间
    getTime() {
      const nowdate = new Date()
      const year = nowdate.getFullYear(),
        month = this.checkTime(nowdate.getMonth() + 1),
        date =  this.checkTime(nowdate.getDate()),
        h =  this.checkTime(nowdate.getHours()),
        m = this.checkTime(nowdate.getMinutes()),
        s =  this.checkTime(nowdate.getSeconds())
      return `${year}-${month}-${date} ${h}:${m}:${s}`
    },

    // 时间补位
    checkTime(i) {
      if (i < 10) {
        i = '0' + i
      }
      return i
    },

    // 展示关联商品
    handleShowProductList(productList) {
      this.productList = productList
      this.productVisible = true
    },

    // 删除
    handleDelet(id) {
      contentDelete({ id }).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.getCount()
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 审核
    handleExamine(id) {
      this.examineOrDetailsVisible = true
      contentDetails({ id }).then(res => {
        if (res.code === 200) {
          const {bodyContent, contentTitle, id, literalReason, pictureReason, pictureVideo} = res.data
          this.bodyContent = bodyContent
          let currentContentTitle = contentTitle
          const currentPictureReason = pictureReason ? JSON.parse(pictureReason) : []
          if (pictureVideo) {
            this.pictureVideo = pictureVideo.split(',').map(e => {
              const index = currentPictureReason.map(i => i.url).indexOf(e)
              return {
                url: e,
                explain: index >=0 ? currentPictureReason[index].explain : '',
                isViolations: currentPictureReason.map(i => i.url).includes(e)
              }
            })
          }
          if (literalReason) {
            literalReason.split(',').forEach(e => {
              if (e) {
                currentContentTitle = currentContentTitle.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
                this.bodyContent = this.bodyContent.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
              }
              
            })
          }
          this.details = {...res.data, contentTitle: currentContentTitle}
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 内容审核记录
    examineRecord() {
      this.$router.push(`/micromall/community/contentManagement/examineRecord`)
    },

    // 预览视频
    handlePreview(url) {
      this.videoUrl = url
      this.previewVisible = true
    },
    tabChange(activeKey) {
      this.sort = {}
      this.activeKey = activeKey
      switch (activeKey) {
        case '0':
          // 已启用
          this.columns = enabledColumns
          break
        case '2':
          // 待审核
          this.columns = examineColumns
          break
        case '3':
          // 待发布
          this.columns = releasedColumns
          break
        case '1':
          // 已禁用
          this.columns = disableColumns
          break
      }
      this.$refs.filter.reset()
    },

    checkRoute(fromPath, routeArr) {
      for (let i = 0; i < routeArr.length; i++) {
        if (fromPath.includes(routeArr[i])) {
          return true
        }
      }
      return false
    },

    //搭配内商品
    handleShowCurrentProductList(list) {
      this.productList = list
      this.productVisible = true
    },

    // 编辑
    handleEdit(id) {
      this.$router.push(`/micromall/community/contentManagement/addOrEditOfficialContent/${id}`)
    },

    // 详情
    handleDetails(id) {
      this.$router.push(`/micromall/community/contentManagement/details/${id}`)
    },

    // 详情(弹窗)
    handleDetailsModal(id) {
      this.examineOrDetailsVisible = true
      this.details = {}
      contentDetails({ id }).then(res => {
        if (res.code === 200) {
          const {bodyContent, contentTitle, literalReason, pictureReason, pictureVideo} = res.data
          this.bodyContent = bodyContent
          let currentContentTitle = contentTitle
          const currentPictureReason = pictureReason ? JSON.parse(pictureReason) : []
          if (pictureVideo) {
            this.pictureVideo = pictureVideo.split(',').map(e => {
              const index = currentPictureReason.map(i => i.url).indexOf(e)
              return {
                url: e,
                explain: index >=0 ? currentPictureReason[index].explain : '',
                isViolations: currentPictureReason.map(i => i.url).includes(e)
              }
            })
          }
          if (literalReason) {
            literalReason.split(',').forEach(e => {
              if (e) {
                currentContentTitle = currentContentTitle.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
                this.bodyContent = this.bodyContent.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
              }
            })
          }
          this.details = {...res.data, contentTitle: currentContentTitle}
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 查看大图
    handleShowImg(index, productImgList) {
      this.imgCurrent = index
      this.imgVisible = true
      this.imgs = productImgList
    },

    //查询
    onSearch(obj) {
      this.queryParam = obj
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-input-number-sm /deep/ input{
  text-align: center;
}
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}

.img-wrapper {
  display: flex;

  .img-list {
    display: flex;
  }

  .img-text {
    line-height: 60px;
    color: #999;
  }
}

.img {
  display: block;
  margin: 0 2px;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.product {
  display: flex;
  overflow: hidden;
  .img {
    margin: 0;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
.product-list {
  .product-item {
    line-height: 18px;
    text-align: left;
  }

  .product-num {
    cursor: pointer;
    text-align: left;
  }
}
.content-record {
  position: absolute;
  right: 0;
  top: 15px;
}
.image-video-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  .img-num {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>
